<template>
    <div id="login">
        <div class="form-container sign-up-container">
            <form action="#" v-if="registerStep === 0">
                <h1>注册-1/2步</h1>
                <input type="text" placeholder="用户名:邮箱/手机号" v-model="requestYzmForm.username" @input="registerTip = ''">
                <div class="yzmBox" v-if="yzmSrc">
                    <input v-model="requestYzmForm.yzm" type="text" placeholder="验证码" autocomplete="off"
                        @input="registerTip = ''" ref="requestRegisterYzmInput">
                    <img :src="yzmSrc" @click="refreshYzm($refs['requestRegisterYzmInput'])" />
                </div>
                <button @click.prevent="doRequestYzm">下一步</button>
                <span class="tip">{{  registerTip  }}</span>
            </form>
            <form action="#" v-if="registerStep === 1">
                <h1>注册-2/2步</h1>
                <input type="text" v-model="registerForm.username" disabled>
                <input v-model="registerForm.password" type="text" placeholder="密码" autocomplete="off"
                    @input="registerTip = ''">
                <input v-model="registerForm.password2" type="text" placeholder="重复密码" autocomplete="off"
                    @input="registerTip = ''">
                <input v-model="registerForm.yzm" type="text" placeholder="收到的验证码" autocomplete="off"
                    @input="registerTip = ''">
                <button @click.prevent="doRegister">立即注册</button>
                <span class="tip">{{  registerTip  }}</span>
            </form>
        </div>
        <div class="form-container sign-in-container">
            <form action="#">
                <h1>登录</h1>
                <!-- <div class="social-container">
                    <div class="qq jc" @click="clickQQLogin">
                        <svg fill="#50c8fd" viewBox="0 0 24 24" width="20" height="20">
                            <path
                                d="M12.003 2c-2.265 0-6.29 1.364-6.29 7.325v1.195S3.55 14.96 3.55 17.474c0 .665.17 1.025.281 1.025.114 0 .902-.484 1.748-2.072 0 0-.18 2.197 1.904 3.967 0 0-1.77.495-1.77 1.182 0 .686 4.078.43 6.29 0 2.239.425 6.287.687 6.287 0 0-.688-1.768-1.182-1.768-1.182 2.085-1.77 1.905-3.967 1.905-3.967.845 1.588 1.634 2.072 1.746 2.072.111 0 .283-.36.283-1.025 0-2.514-2.166-6.954-2.166-6.954V9.325C18.29 3.364 14.268 2 12.003 2z"
                                fill-rule="evenodd"></path>
                        </svg>
                    </div>
                    <span id="qqLoginBtn" style="display: none;"></span>
                    <div class="vx jc" @click="clickVXLogin">
                        <svg fill="#60c84d" viewBox="0 0 24 24" width="20" height="20">
                            <path
                                d="M2.224 21.667s4.24-1.825 4.788-2.056C15.029 23.141 22 17.714 22 11.898 22 6.984 17.523 3 12 3S2 6.984 2 11.898c0 1.86.64 3.585 1.737 5.013-.274.833-1.513 4.756-1.513 4.756zm5.943-9.707c.69 0 1.25-.569 1.25-1.271a1.26 1.26 0 0 0-1.25-1.271c-.69 0-1.25.569-1.25 1.27 0 .703.56 1.272 1.25 1.272zm7.583 0c.69 0 1.25-.569 1.25-1.271a1.26 1.26 0 0 0-1.25-1.271c-.69 0-1.25.569-1.25 1.27 0 .703.56 1.272 1.25 1.272z"
                                fill-rule="evenodd"></path>
                        </svg>
                    </div>
                </div> -->
                <input v-model="loginForm.username" type="text" placeholder="用户名:邮箱/手机号" autocomplete="off"
                    @input="loginTip = ''">
                <input v-model="loginForm.password" type="password" placeholder="密码" autocomplete="off"
                    @input="loginTip = ''">
                <div class="yzmBox" v-if="yzmSrc">
                    <input v-model="loginForm.yzm" type="text" placeholder="验证码" autocomplete="off"
                        @input="loginTip = ''" ref="loginYzmInput">
                    <img :src="yzmSrc" @click="refreshYzm($refs['loginYzmInput'])" />
                </div>
                <a href="#">忘记密码？</a>
                    <button @click.prevent="doLogin">登录</button>
                <span class="tip">{{  loginTip  }}</span>
            </form>
        </div>
        <div class="overlay-container">
            <div class="overlay">
                <div class="overlay-panel overlay-left">
                    <h1>已有帐号？</h1>
                    <p>请使用您的帐号进行登录</p>
                    <button class="ghost" @click="signInCheck">登录</button>
                </div>
                <div class="overlay-panel overlay-right">
                    <h1>没有帐号？</h1>
                    <p>立即注册加入我们，和我们一起开始旅程吧</p>
                    <button class="ghost" @click="signUpCheck">注册</button>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { loginByUsername, requestRegisterYzm, register } from '@/api/user.js'
import config from '@/config/index.js'
import requestQQLogin from '@/puigins/requestQQLogin'
export default {
    data() {
        return {
            loginTip: '',
            loginForm: {
                username: '',
                password: '',
                yzm: ''
            },
            requestYzmForm: {
                username: '',
                yzm: ''
            },
            registerForm: {
                username: '',
                password: '',
                password2: '',
                yzm: ''
            },
            URL: config.URL,
            yzmSrc: '',
            registerStep: 0,
            registerTip: '',

        }
    },
    mounted() {
    },
    created() {
        this.refreshYzm()
    },
    methods: {
        clickVXLogin() {
            return alert("暂未开放微信登录")
        },
        clickQQLogin() {
            requestQQLogin.call(this)
        },
        doRegister() {
            let registerForm = this.registerForm
            if (registerForm.password.length < 6 || registerForm.password.length > 45) {
                return this.registerTip = '密码长度6-45位'
            }
            if (registerForm.password !== registerForm.password) {
                return this.registerTip = '两次输入密码不一致'
            }
            if (registerForm.yzm.length < 1) {
                return this.registerTip = '请输入收到的验证码'
            }
            register(registerForm).then(res => {
                res = res.data
                if (res.code == 200) {
                    this.registerTip = '注册成功'
                    setTimeout(() => {
                        this.loginForm.username = registerForm.username
                        this.loginForm.password = registerForm.password
                        this.loginForm.yzm = ''
                        this.registerForm.username = ''
                        this.registerForm.password = ''
                        this.registerForm.password2 = ''
                        this.registerForm.yzm = ''
                        this.$nextTick(() => {
                            this.signInCheck()
                            setTimeout(() => {
                                this.refreshYzm(this.$refs['loginYzmInput'])
                            }, 1000);
                        })
                    }, 1000);
                } else {
                    this.registerTip = res.msg
                }
            })
        },
        doRequestYzm() {
            let requestYzmForm = this.requestYzmForm
            if (requestYzmForm.username.length < 6 || requestYzmForm.username.length > 32) {
                return this.registerTip = '用户名长度6-32位'
            }
            if (requestYzmForm.yzm.length < 1) {
                return this.registerTip = '请输入验证码'
            }
            requestRegisterYzm(requestYzmForm).then(res => {
                res = res.data
                this.requestYzmForm.yzm = ''
                console.log(res)
                if (res.code == 200) {
                    this.registerStep = 1
                    console.log(requestYzmForm)
                    this.registerForm.username = requestYzmForm.username
                    this.registerForm.password = ''
                    this.registerForm.password2 = ''
                    this.registerForm.yzm = ''
                    this.registerTip = res.data
                } else {
                    this.registerTip = res.msg
                    this.refreshYzm(this.$refs['requestRegisterYzmInput'])
                }
            })
        },
        refreshYzm(inputDom) {
            let key = 'inchaonmdshaklufdsajkn'
            if (window[key]) {
                return
            }
            window[key] = true
            setTimeout(() => {
                window[key] = false
            }, 300);
            this.yzmSrc = config.URL + '/img/yzm?t=' + new Date().getTime()
            if (inputDom && typeof inputDom.focus === 'function') {
                inputDom.focus()
            }
        },
        doLogin() {
            let loginForm = this.loginForm
            if (loginForm.username === '') {
                return this.loginTip = '请输入用户名'
            }
            if (loginForm.password === '') {
                return this.loginTip = '请输入密码'
            }
            if (loginForm.yzm === '') {
                return this.loginTip = '请输入验证码'
            }
            loginByUsername(loginForm).then(res => {
                res = res.data
                if (res.code == 200) {
                    console.log(res)
                    // if (window.opener) {
                    //     let callback = this.$route.query.callback
                    //     if (callback) {
                    //         let obj = {}
                    //         obj[callback] = res.data
                    //         window.opener.postMessage(obj, '*')
                    //         this.$nextTick(() => {
                    //             window.close()
                    //         })
                    //     } else {
                    //         console.log("无callback")
                    //     }
                    // } else {
                    //     if(this.$route.query.peHandleQQLoginPage){
                    //         window.location.href=this.$route.query.peHandleQQLoginPage+"?token="+res.data.token
                    //     }else{
                    //         console.log("无window.opener")
                    //     }
                    // }
                    this.$store.commit('user/setUser',res.data)
                    this.$router.push("/netpan")
                } else {
                    this.loginTip = res.msg
                    this.refreshYzm()
                    this.loginForm.yzm = ''
                }
            })
        },
        signUpCheck() {
            this.$el.classList.add('right-panel-active')
            this.registerStep = 0
            this.registerTip = ''
        },
        signInCheck() {
            this.$el.classList.remove('right-panel-active')
            this.loginTip = ''
        }
    },
}
</script>
<style lang="scss">
#login {

    background: #fff;
    border-radius: 10px;
    box-shadow: 0 14px 28px rgba(0, 0, 0, .25), 0 10px 10px rgba(0, 0, 0, .22);
    position: relative;
    overflow: hidden;
    width: 768px;
    max-width: 100%;
    min-height: 480px;
    margin-left: -384px;
    left: 50%;
    top: 50%;
    margin-top: -240px;

    .yzmBox {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .tip {
        color: #f00;
    }

    h1 {
        font-weight: bold;
        margin: 0;
    }

    p {
        font-size: 14px;
        line-height: 20px;
        letter-spacing: .5px;
        margin: 20px 0 30px;
    }

    span {
        font-size: 12px;
    }

    a {
        color: #333;
        font-size: 14px;
        text-decoration: none;
        margin: 15px 0;
    }



    .form-container form {
        background: #fff;
        display: flex;
        flex-direction: column;
        padding: 0 50px;
        height: 100%;
        justify-content: center;
        align-items: center;
        text-align: center;
    }

    .social-container {
        margin: 20px 0;
        display: flex;
        gap: 20px;

        .jc {
            border: 1px solid #ccc;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 10px;
            border-radius: 50%;
            cursor: pointer;

            &:hover {
                background-color: #ccc;
            }
        }
    }

    .form-container input {
        background: #eee;
        border: none;
        padding: 12px 15px;
        margin: 8px 0;
        width: 100%;
        outline: none;
    }

    button {
        border-radius: 20px;
        border: 1px solid #ff4b2b;
        background: #ff4b2b;
        color: #fff;
        font-size: 12px;
        font-weight: bold;
        padding: 12px 45px;
        letter-spacing: 1px;
        text-transform: uppercase;
        transition: transform 80ms ease-in;
        cursor: pointer;
    }

    button:active {
        transform: scale(.95);
    }

    button:focus {
        outline: none;
    }

    button.ghost {
        background: transparent;
        border-color: #fff;
    }

    .form-container {
        position: absolute;
        top: 0;
        height: 100%;
        transition: all .6s ease-in-out;
    }

    .sign-in-container {
        left: 0;
        width: 50%;
        z-index: 2;
    }

    .sign-up-container {
        left: 0;
        width: 50%;
        z-index: 1;
        opacity: 0;
    }

    .overlay-container {
        position: absolute;
        top: 0;
        left: 50%;
        width: 50%;
        height: 100%;
        overflow: hidden;
        transition: transform .6s ease-in-out;
        z-index: 100;
    }

    .overlay {
        background: #ff416c;
        background: linear-gradient(to right, #ff4b2b, #ff416c) no-repeat 0 0 / cover;
        color: #fff;
        position: relative;
        left: -100%;
        height: 100%;
        width: 200%;
        transform: translateY(0);
        transition: transform .6s ease-in-out;
    }

    .overlay-panel {
        position: absolute;
        top: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 0 40px;
        height: 100%;
        width: 50%;
        text-align: center;
        transform: translateY(0);
        transition: transform .6s ease-in-out;
    }

    .overlay-right {
        right: 0;
        transform: translateY(0);
    }

    .overlay-left {
        transform: translateY(-20%);
    }

    /* Move signin to right */
    &.right-panel-active .sign-in-container {
        transform: translateY(100%);
    }

    /* Move overlay to left */
    &.right-panel-active .overlay-container {
        transform: translateX(-100%);
    }

    /* Bring signup over signin */
    &.right-panel-active .sign-up-container {
        transform: translateX(100%);
        opacity: 1;
        z-index: 5;
    }

    /* Move overlay back to right */
    &.right-panel-active .overlay {
        transform: translateX(50%);
    }

    /* Bring back the text to center */
    &.right-panel-active .overlay-left {
        transform: translateY(0);
    }

    /* Same effect for right */
    &.right-panel-active .overlay-right {
        transform: translateY(20%);
    }
}
</style>